<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="member-center">
			<view class="header-bg">
				<image src="/static/my/bg.png" mode="aspectFill" class="bg-image"
					:style="{ height: bgHeight + 'px' }" />
			</view>
			<view class="profile-header" :style="{ height: bgHeight + 'px' }">
				<view class="header-top">
					<view class="username-section">
						<text class="username">{{ t("my.Esteemed") }}</text>
						<tn-icon name='down'></tn-icon>
					</view>
					<view class="settings-btn">
						<image src="/static/my/icon10.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
				</view>
				<view class="avatar-section">
					<image class="avatar"
						src="https://omotesando-skin.jp/wp/wp-content/uploads/2024/05/shutterstock_1822972946-1-e1717751173738.jpg"
						mode="aspectFill" />
					<view class="vip-badge">
						<image src="https://tnuiimage.tnkjapp.com/logo/tuniao.png" class="vip-icon" />
						<image src="/static/my/icon12.png" mode="" style="width: 104rpx;height: 56rpx;"></image>
						<p class="level">vip 2</p>
					</view>
					<text class="user-id">@Esteemed231</text>
				</view>
			</view>

			<view class="member-card">
				<view class="card-header">
					<view class="title-section">
						<image src="/static/my/star.png" class="diamond-icon" />
						<text class="title">{{ t("my.MemberCenter") }}</text>
					</view>
					<image src="/static/my/Vector.png" class="vip-card-image" style="width: 116rpx;height: 62rpx;" />
				</view>
			</view>

			<view class="sample-section">
				<view class="section-header">
					<text class="section-title">{{ t("my.SampleRequest") }}</text>
					<view class="view-all" @tap="viewAllRequests">
						<text>{{ t("common.all") }}</text>
						<tn-icon name='right'></tn-icon>
					</view>
				</view>

				<view class="status-grid">
					<view class="status-item" v-for="(status, index) in statusList" :key="index"
						@tap="navigateToStatus(status)">
						<view class="status-icon">
							<image :src="status.iconText" mode="" style="width: 52rpx;height: 52rpx;"></image>
						</view>
						<text class="status-text">{{ status.text }}</text>
						<!-- <text class="status-count" v-if="status.count">{{ status.count }}</text> -->
					</view>
				</view>
			</view>

			<view class="nav-menu">
				<view class="nav-item" v-for="(item, index) in menuItems" :key="index" @tap="navigateToMenu(item)">
					<view class="nav-icon">
						<image :src="item.iconText" mode="" style="width: 52rpx;height: 52rpx;"></image>
					</view>
					<text class="nav-text">{{ item.text }}</text>
					<tn-icon name='right'></tn-icon>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	const bgHeight = ref(360); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	const statusList = ref([
		{
			text: t("my.PendingReview"),
			icon: 'icon-clock',
			iconText: "/static/my/icon13.png",
			count: 2
		},
		{
			text: t("my.ToBeShipped"),
			icon: 'icon-heart',
			iconText: "/static/my/icon15.png",
			count: 1
		},
		{
			text: t("my.PendingFulfill"),
			icon: 'icon-box',
			iconText: "/static/my/icon14.png",
			count: 3
		},
		{
			text: t("my.FulfillFailed"),
			icon: 'icon-warning',
			iconText: "/static/my/icon9.png",
			count: 0
		}
	])

	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(360 + moveY, 450); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 150); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 360) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
	const menuItems = ref([
		{
			text: t("my.ManageShowcase"),
			icon: 'icon-showcase',
			iconText: "/static/my/icon.png",
			path: ''
		},
		{
			text: t("my.Footprint"),
			icon: 'icon-footprint',
			iconText: "/static/my/icon3.png",
			path: '/pages/footprint/footprint'
		},
		{
			text: t("my.Wishlist"),
			icon: 'icon-star',
			iconText: "/static/my/icon5.png",
			path: '/pages/commission/commission'
		},
		{
			text: t("my.Address"),
			icon: 'icon-location',
			iconText: "/static/my/icon7.png",
			path: '/pages/address/address',
		}
	])

	// Methods
	const viewAllRequests = () => {
		uni.navigateTo({
			url: '/pages/requests/list'
		})
	}

	const navigateToStatus = (status : any) => {
		uni.navigateTo({
			url: `/pages/sampleOrderManagement/sampleOrderManagement?type=${status.text}`
		})
	}

	const navigateToMenu = (item : any) => {
		if (item.path == '') {
			plus.runtime.openURL("https://www.baidu.com")
			return
		}
		uni.navigateTo({
			url: item.path
		})
	}
</script>

<style lang="scss">
	.member-center {
		min-height: 100vh;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		z-index: -1;
	}

	.bg-image {
		width: 100%;
		object-fit: cover;
		transition: height 0.2s ease-out;
	}

	.profile-header {
		width: 100%;
		background: #fff;
		// border-radius: 20px 20px 0 0;
		position: relative;
		z-index: 2;
		transition: margin-top 0.2s ease-out;
		background: url("/static/my/bg.png") no-repeat center center/cover;
		padding-top: 88rpx;
		height: 600rpx;

		.header-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;

			.username-section {
				display: flex;
				align-items: center;
				gap: 4px;

				.username {
					font-size: 20px;
					font-weight: 600;
					color: #333;
				}

				.icon-down {
					font-size: 16px;
					color: #666;
				}
			}

			.settings-btn {
				padding: 8px;

				.icon-settings {
					font-size: 20px;
					color: #666;
				}
			}
		}

		.avatar-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 2rpx solid #EDEDED;
				overflow: hidden;
			}

			.vip-badge {
				display: flex;
				align-items: center;

				.level {
					height: 32rpx;
					font-family: DIN-BlackItalic, DIN-BlackItalic;
					font-weight: 400;
					font-size: 20rpx;
					color: #7F2000;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: -58rpx;
					z-index: 1000;
				}

				.vip-icon {
					width: 16px;
					height: 16px;
				}

				.vip-text {
					color: #fff;
					font-size: 12px;
					font-weight: 600;
				}
			}

			.user-id {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
			}
		}
	}

	.member-card {
		// background: #333;
		// border-radius: 16px;
		padding: 36rpx;
		margin: auto;
		// margin: 20px 0;
		width: 684rpx;
		height: 222rpx;
		background: linear-gradient(90deg, #333333 0%, #6B6B6B 100%);
		border-radius: 72rpx 72rpx 72rpx 72rpx;

		.card-header {
			display: flex;
			justify-content: space-between;
			// align-items: center;

			.title-section {
				display: flex;
				// align-items: center;
				gap: 8px;

				.diamond-icon {
					width: 100rpx;
					height: 100rpx;
				}

				.title {
					color: #fff;
					font-size: 16px;
					font-weight: 500;
				}
			}

			.vip-card-image {
				width: 100px;
				height: 60px;
				object-fit: contain;
			}
		}
	}

	.sample-section {
		background: #fff;
		padding: 20px;
		margin-bottom: 20px;
		margin-top: -100rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.section-title {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.view-all {
				display: flex;
				align-items: center;
				gap: 4px;
				color: #666;
				font-size: 14px;
			}
		}

		.status-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16px;

			.status-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;

				.status-icon {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					background: #f5f5f5;
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						font-size: 20px;
						color: #ff4d67;
					}
				}

				.status-text {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
					text-transform: none;
				}

				.status-count {
					font-size: 12px;
					color: #ff4d67;
				}
			}
		}
	}

	.nav-menu {
		overflow: hidden;

		.nav-item {
			display: flex;
			align-items: center;
			padding: 16px 20px;
			border-bottom: 1px solid #f5f5f5;
			margin-bottom: 20rpx;
			background: #fff;

			&:last-child {
				border-bottom: none;
			}

			.nav-icon {
				width: 52rpx;
				height: 52rpx;
				margin-right: 20rpx;

				.iconfont {
					font-size: 20px;
					color: #333;
				}
			}

			.nav-text {
				flex: 1;
				font-size: 14px;
				color: #333;
			}

			.icon-right {
				font-size: 16px;
				color: #999;
			}
		}
	}
</style>